<template>
	<!-- 商品详情页 -->
	<view class="app">
		<!-- 吸顶搜索栏 -->
		<view class="top-bar sticky-tabs">
			<u-icon class="icon" name="arrow-left" color="#eee" size="64" @click="vk.navigateBack"></u-icon>
			<view class="search-bar">
				<u-search placeholder="商品搜索" v-model="keyword" :show-action="false" shape="square" @search="search"></u-search>
			</view>
			<u-icon class="icon" name="list-dot" color="#eee" size="64"
				@click="toMore()"></u-icon>
		</view>
		<!-- 商品详情 -->
		<view class="main">
			<view class="banner-bar">
				<u-swiper :list="formData.images2.split(',')" height="600" :title="false" img-mode="aspectFit"
					:autoplay="false" mode="none" @click="preview"></u-swiper>
			</view>
			
			<view class="section">
				<view class="title">{{formData.title}}</view>
				<view class="text2 row">
					<view class="row row-center">
						<u-icon class="icon" name="clock" color="#333" size="18" @click=""></u-icon>
						{{formData.publish_time_str.substr(0, 10)}}
					</view>
					<view class="row row-center">
						<u-icon class="icon" name="eye" color="#333" size="24" @click=""></u-icon>
						{{formData.pv}}
					</view>
				</view>
			</view>
			
			<view class="section">
				<view class="row">价格： <text class="price">￥<text class="amount">{{formData.price.toFixed(2)}}</text></text></view>
				<view class="row">起订： 2件</view>
				<view class="row">供应： 100000件</view>
				<view class="btn-bar">
					<u-button type="success" @click="buy">立即购买</u-button>
				</view>
			</view>
			
			<view class="section">
				<u-parse :html="formData.content"></u-parse>
			</view>
			
			<u-tabbar :list="vk.getVuex('$tabbar')"></u-tabbar>
		</view>
	</view>
</template>

<script>
	import config from "@/app.config.js";
	import GOODS from "@/data/goods.js";

	export default {
		data() {
			return {
				id: null,
				keyword: '',
				
				formData: {},
			}
		},
		onLoad(options = {}) {
			this.initPage(options)
		},
		methods: {
			initPage(options = {}) {
				if(!options.id) return
				
				this.id = options.id;
				this.getData();
			},
			pageTo(path) {
				vk.navigateTo(path);
			},
			search(){
			// 点击了搜索
				if (config.debug) console.log('搜索', this.keyword)
				vk.toast('搜索' + this.keyword);
			},
			pageTo(path) {
				vk.navigateTo(path);
			},
			getData(){
				this.formData = GOODS.find(item => item.id == this.id);
				uni.setNavigationBarTitle({
					title: this.formData.category_name
				})
			},
			buy(){
				console.log('点击了立即购买');
				vk.toast('点击了立即购买');
			},
			preview(){
				vk.toast('点击了图片');
			}
		},
		// 监听器
		watch: {

		},
		// 计算属性
		computed: {

		},
	}
</script>

<style lang="scss">
	.app {
		
	}
	
	.banner-bar{
		height: 600rpx;
	}
	
	.section{
		padding: 0 30rpx;
		background-color: #fff;
	}

	.title {
		margin: 50rpx 0;
		font-size: 24px;
		font-weight: 700;
		// text-align: center;
	}
	
	.price .amount{
		font-size: 28px;
		font-weight: 700;
	}
</style>